import { reactive, type Ref } from 'vue';
import blueMarker from '@/assets/images/grade/7.png';
import type {
    OlMapInstanceType,
    FeatureWithCenterInCallBack,
    TapMarkerCallBack,
    Point,
    MarkerData
} from '@/components/ui/OlMap';
import {
    getRoutePlanning as routePlanningByCar
} from '@/components/ui/OlMap/utils/index';
const paths: { line: Point[] }[] = [];
const markersData: MarkerData[] = [
    {
        lng: 109.13696149542488,
        lat: 21.44311635576539,
        iconUrl: blueMarker,
        label: '测试点1',
        info: [
            {
                title: '标题1',
                content: '内容1',
                class: 'c-red'
            },
            {
                html: '<div>html生成</div>'
            }
        ]
    },
    {
        lng: 109.13820863904851,
        lat: 21.44207224286931,
        iconUrl: blueMarker,
        label: '测试点2',
        info: [
            {
                title: '标题1',
                content: '内容1',
                class: 'c-red'
            },
            {
                html: '<div>html生成</div>'
            }
        ]
    },
    {
        lng: 109.13834490552229,
        lat: 21.44017614859292,
        iconUrl: blueMarker,
        label: '测试点3',
        info: [
            {
                title: '标题1',
                content: '内容1',
                class: 'c-red'
            },
            {
                html: '<div>html生成</div>'
            }
        ]
    }
];

export const mapModel = reactive({
    type: 1,
    location: {
        lng: 109.13820863904851,
        lat: 21.44207224286931
    },
    polygonsData: [
        {
            polygon: [
                { lng: 109.13546838068153, lat: 21.44447755314547 },
                { lng: 109.13707284975486, lat: 21.44498999389575 },
                { lng: 109.13890924451967, lat: 21.44201652293969 },
                { lng: 109.13837779300235, lat: 21.44113230978243 },
                { lng: 109.1367194648111, lat: 21.440642364634282 }
            ],
            strokeWidth: 1,
            strokeColor: '#CCC58F',
            strokeOpacity: 1,
            fillColor: '#154889',
            fillOpacity: 0.5
        },
        {
            polygon: [
                { lng: 109.1412724543698, lat: 21.442730666006483 },
                { lng: 109.13890924451967, lat: 21.44201652293969 },
                { lng: 109.13837779300235, lat: 21.44113230978243 },
                { lng: 109.1367194648111, lat: 21.440642364634282 },
                { lng: 109.13742150377206, lat: 21.43864372367838 },
                { lng: 109.14218472355262, lat: 21.440008556292124 }
            ],
            strokeWidth: 1,
            strokeColor: '#CCC58F',
            strokeOpacity: 1,
            fillColor: '#154889',
            fillOpacity: 0.5
        }
    ],
    markersData,
    paths,
    linesData: [
        {
            lng: 109.13336263468743,
            lat: 21.45045448078759
        },
        {
            lng: 109.12774257532155,
            lat: 21.468017763203587
        },
        {
            lng: 109.10574156331062,
            lat: 21.45441934441379
        },
        {
            lng: 109.08995932759574,
            lat: 21.468984569288416
        }
    ]
});

export const getRoutePlanning = () => {
    return routePlanningByCar({ points: mapModel.linesData, type: 1 }).then(
        (res) => {
            console.log(res);
            mapModel.paths = [{ line: res.path }];
            mapModel.markersData = [...mapModel.markersData, ...res.points];
        }
    );
};

export const polygonWithCenterIn: FeatureWithCenterInCallBack = (e) => {
    if (e) {
        const { feature, mapInstance } = e;
        mapInstance.setFocusFeature(feature, {
            fillColor: 'red',
            fillOpacity: 0.5
        });
    }
};
export const createFnTapMarker =
    (mapView: Ref<OlMapInstanceType | null>): TapMarkerCallBack =>
        (e) => {
            const { data, targetType } = e;
            if (targetType !== 'routePoint' && data.info) {
                mapView.value &&
                mapView.value.openInfo({
                    lng: data.lng,
                    lat: data.lat,
                    info: data.info,
                    popupClass: data.popupClass,
                    data
                });
            }
        };
